<template>
  <div class="dev space">
    <el-card class="space">
      <div slot="header">
        <span>开发者使用</span>
      </div>
      <div>
        <el-button type="primary" @click="clearCookie">
          清除所有cookie
        </el-button>
        <el-button type="primary" @click="initTableAndField">
          初始化表数据
        </el-button>
      </div>
    </el-card>
    <el-card class="space">
      <div slot="header">
        <span>数据字典</span>
      </div>
      <div style="display: flex;align-items: center;">
        <span style="margin-right: 20px">字典:</span>
        <el-input v-model="dictName" style="width: 150px;margin-right: 20px"></el-input>
        <el-button type="primary" @click="addDict">添加一级</el-button>
      </div>
      <div class="space" style="display: flex;align-items: center;">
        <span style="margin-right: 20px">字典一级菜单:</span>
        <el-select v-model="dictLevel1Code">
          <el-option
            v-for="item in dictLevel1"
            :key="item.id"
            :label="item.name"
            :value="item.code">
          </el-option>
        </el-select>
        <span style="margin-right: 20px">名字:</span>
        <el-input v-model="dictLevel2Name" style="width: 150px;margin-right: 20px"></el-input>
        <el-button type="primary" @click="addDictLevel2">添加二级</el-button>
      </div>
    </el-card>
    <el-card class="space">
      <div slot="header">
        <span>单位</span>
      </div>
      <div style="display: flex;align-items: center;">
        <span style="margin-right: 20px">单位名:</span>
        <el-input v-model="category.name" style="width: 150px;margin-right: 20px"></el-input>
        <span style="margin-right: 20px">国际单位:</span>
        <el-input v-model="category.value" style="width: 150px;margin-right: 20px"></el-input>
        <el-button type="primary" @click="addCategory">添加</el-button>
      </div>
      <div class="space" style="display: flex;align-items: center;">
        <span style="margin-right: 20px">选择单位:</span>
        <el-select v-model="categoryId" filterable placeholder="请选择">
          <el-option
            v-for="item in types"
            :key="item.id"
            :label="item.unitName"
            :value="item.id">
          </el-option>
        </el-select>
        <span style="margin-right: 20px">添加单位:</span>
        <el-input v-model="categoryValue" style="width: 150px;margin-right: 20px"></el-input>
        <el-button type="primary" @click="addCategoryValue">添加</el-button>
      </div>
    </el-card>
    <el-card class="space">
      <div slot="header">
        <span>功能菜单</span>
      </div>
      <div style="display: flex;align-items: center;">
        <span class="space-between">功能名:</span>
        <el-input v-model="dictLevel2Name" class="input-width space-between"></el-input>
        <span class="space-between">请求路径:</span>
        <el-input v-model="dictLevel2Name" class="input-width space-between"></el-input>
        <span class="space-between">路由:</span>
        <el-input v-model="dictLevel2Name" class="input-width space-between"></el-input>
        <span class="space-between">icon:</span>
        <el-input v-model="dictLevel2Name" class="input-width space-between"></el-input>
        <span class="space-between">主键:</span>
        <el-input v-model="dictLevel2Name" class="input-width space-between"></el-input>
        <el-button type="primary" @click="addMenu">新增菜单</el-button>
      </div>
    </el-card>
    <div class="space" style="display: flex">
      <el-card style="width:500px">
        <div slot="header">
          <span>表</span>
        </div>
        <cement-table
          :tableTitle="tableTitle"
          :tableData="tableData"
          @cementClick="clickTable"
        >
        </cement-table>
      </el-card>
      <el-card style="width:1100px;margin-left: 200px" v-show="showField">
        <div slot="header">
          <span>{{tableName}}属性</span>
        </div>
        <cement-table
          :tableTitle="fieldTitle"
          :tableData="fieldData"
          buttonName="修改"
          @cementClick="clickField"
        >
        </cement-table>
      </el-card>
    </div>
    <div class="space" v-if="showUpdateField">
      <el-form :inline="true" :model="fieldInfo" class="demo-form-inline">
        <el-form-item label="字段名:">{{fieldInfo.filedName}}</el-form-item>
        <el-form-item label="字段类型:">{{fieldInfo.fieldType}}</el-form-item>
        <el-form-item label="是否为空:">{{fieldInfo.null}}</el-form-item>
        <el-form-item label="类型:">
          <el-select v-model="fieldInfo.type" placeholder="类型">
            <el-option
              v-for="(type,index) in types"
              :label="type.unitName"
              :value="type.id"
              :key="index">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="描述:">
          <el-input v-model="fieldInfo.description"></el-input>
        </el-form-item>
        <el-form-item label="正则表达式:">
          <el-input v-model="fieldInfo.regularExpression"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="updateField">修改</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import {clearCookie} from '@/util/help'
import {CODE} from '@/util/constant'
import cementTable from '@/components/cement-table-card.vue'
import {get} from 'lodash'
import {getTable, getField, getUnitCategory, updateField, initTableAndField, addDict, addCategory, getDictLevel1, addDictLevel2, addCategoryValue} from '@/api/module/dev'

const TABLE_TITLE = [
  {
    prop: 'tableName',
    label: '表名',
    width: 300
  }
]

const FIELD_TITLE = [
  {
    prop: 'filedName',
    label: '字段名',
    width: 200
  },
  {
    prop: 'fieldType',
    label: '字段类型',
    width: 100
  },
  {
    prop: 'type',
    label: '类型',
    width: 100
  },
  {
    prop: 'description',
    label: '描述',
    width: 200
  },
  {
    prop: 'regularExpression',
    label: '正则表达式',
    width: 200
  }
]

export default {
  name: 'dev',
  data () {
    return {
      tableTitle: TABLE_TITLE,
      fieldTitle: FIELD_TITLE,
      tableData: [],
      fieldData: [],
      tableName: '',
      showField: false,
      showUpdateField: false,
      types: [],
      fieldInfo: {
        id: 0,
        filedName: '',
        fieldType: '',
        null: '',
        type: '',
        description: '',
        regularExpression: ''
      },
      dictName: '',
      category: {
        name: '',
        value: ''
      },
      dictLevel1: [],
      dictLevel1Code: '',
      dictLevel2Name: '',
      categoryId: '',
      categoryValue: ''
    }
  },
  components: {
    cementTable
  },
  methods: {
    clearCookie () {
      clearCookie()
    },
    clickTable (table) {
      this.tableName = get(table, 'tableName', '')
      if (get(table, 'id')) {
        getField(table.id).then((res) => {
          if (get(res, 'data.data')) {
            this.fieldData = res.data.data
          }
        })
      }
      this.showField = true
    },
    clickField (field) {
      this.fieldInfo = field
      this.showUpdateField = true
    },
    updateField () {
      updateField(this.fieldInfo).then((res) => {
      })
      this.showUpdateField = false
    },
    getTable () {
      getTable().then((res) => {
        if (get(res, 'data.data')) {
          this.tableData = res.data.data
        }
      })
    },
    getUnitCategory () {
      getUnitCategory().then((res) => {
        if (get(res, 'data.data')) {
          this.types = res.data.data
        }
      })
    },
    initTableAndField () {
      initTableAndField().then((res) => {
        let code = get(res, 'data.code', CODE.FAIL)
        if (code === CODE.SUCCESS) {
          this.getTable()
        }
      })
    },
    addDict () {
      addDict(this.dictName).then(this.dictName = '')
    },
    addCategory () {
      addCategory(this.category)
      this.category.name = ''
      this.category.value = ''
    },
    getDictLevel1 () {
      getDictLevel1().then(res => {
        if (get(res, 'data.data')) {
          this.dictLevel1 = get(res, 'data.data')
        }
      })
    },
    addDictLevel2 () {
      addDictLevel2(this.dictLevel1Code, this.dictLevel2Name)
      this.dictLevel1Code = ''
      this.dictLevel2Name = ''
    },
    addCategoryValue () {
      addCategoryValue(this.categoryId, this.categoryValue)
      this.categoryValue = ''
    },
      addMenu() {
          console.log(123)
      }
  },
  mounted () {
    this.getTable()
    this.getUnitCategory()
    this.getDictLevel1()
  }
}
</script>

<style scoped>
  .dev {
    margin: 0 100px;
  }

  .dev:first-child {
    margin-top: 20px;
  }

  .space {
    margin-top: 40px;
  }

  .space-between {
    margin: 0 10px;
  }

  .input-width {
    width: 150px;
  }
</style>
